<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            height: 100vh;
            display: flex;
            justify-content: center;
        }
        div {
            width: 1px;
            margin-top: 50px;
            height: 140px;
            /* border-radius: 50%; */
            background: linear-gradient(0deg, #122 0%, #622a 50%, #0000 50% 100%);
            animation: infinite rotate 1s linear;
        }
        @keyframes rotate  {
            10%{
                transform: rotate(0.1turn);
            }
            20%{
                transform: rotate(0.2turn);
            }
            30%{
                transform: rotate(0.3turn);
            }
            40%{
                transform: rotate(0.4turn);
            }
            50%{
                transform: rotate(0.5turn);
            }
            60%{
                transform: rotate(0.6turn);
            }
            70%{
                transform: rotate(0.7turn);
            }
            80%{
                transform: rotate(0.8turn);
            }
            90%{
                transform: rotate(0.9turn);
            }
            100%{
                transform: rotate(1turn);
            }
        }
    </style>
</head>

<body>
    <div>
    </div>
</body>

</html>